<template>
    <div>
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="loadings" success-text="刷新成功" @refresh="onRefresh">
            <!-- 导航条 -->
            <van-sticky>
                <van-nav-bar class="tabs" title="西安美食攻略">
                    <template #left>
                        <van-badge content="消息">
                            <van-icon name="envelop-o" size="22" style="font-weight:bold;" />
                        </van-badge>
                    </template>
                    <template #right>
                        <van-icon @click="$router.push('/home/search')" name="search" size="22" style="font-weight:bold;" />
                    </template>
                </van-nav-bar>
            </van-sticky>
            <!-- 轮播图 -->
            <van-swipe :autoplay="1700" lazy-render>
                <van-swipe-item v-for="image in images" :key="image">
                    <img style="height: 200px;object-fit: cover;width: 100%;display: block;" :src="image" />
                </van-swipe-item>
            </van-swipe>


            <!-- 广告 -->
            <van-notice-bar left-icon="volume-o" text="徐奥前麻烦你专业一点好不好!把数据库弄的好一点,数据都弄的不一样!!!!!" />



            <!-- 宫格 -->
            <van-grid :border="false" :column-num="5">
                <van-grid-item>
                    <van-image @click="$router.push('/home/huobao')" :src="require(`../../assets/gongge/gongge2.png`)"
                        alt="" />
                    <span>火爆餐饮</span>
                </van-grid-item>
                <van-grid-item>
                    <van-image @click="$router.push('/home/newproduct')" :src="require(`../../assets/gongge/gongge5.png`)"
                        alt="" />
                    <span>新品上架</span>
                </van-grid-item>
                <van-grid-item>
                    <van-image @click="$router.push('/home/drinktype')" :src="require(`../../assets/gongge/gongge4.png`)"
                        alt="" />
                    <span>饮品分类</span>
                </van-grid-item>
                <van-grid-item>
                    <van-image @click="$router.push('/home/special')" :src="require(`../../assets/gongge/gongge3.png`)"
                        alt="" />
                    <span>美食专题</span>
                </van-grid-item>
                <van-grid-item>
                    <van-image @click="$router.push('/home/forum')" :src="require(`../../assets/gongge/gongge1.png`)"
                        alt="" />
                    <span>攻略论吧</span>
                </van-grid-item>
            </van-grid>
            <!-- 灰色空白间距 -->
            <div style="background-color: #EFEFEF;height: 10px;"></div>

            <!-- 四个小卡片 -->
            <van-grid direction="horizontal" :column-num="2" class="tabs">
                <van-grid-item @click="$router.push({ path: '/home/card-search', query: { id: item.id } })" v-for="item in like"
                    :key="item.id">
                    <div>
                        <span style="color: #97D7FF;">{{ item.title }}</span>
                        <p>#{{ item.labels }}</p>
                    </div>
                    <img :src="item.images" alt="">
                </van-grid-item>
            </van-grid>

            <!-- 灰色空白间距 -->
            <div style="background-color: #EFEFEF;height: 10px;"></div>

            <!-- 更多 -->
            <van-sticky>
                <div @click="$router.push('/home/more')"
                    style="display: flex;justify-content: space-between;padding: 10px;background-color: #fff;align-items: center;box-sizing: border-box;height: 50px;overflow: hidden;">
                    <van-sidebar>
                        <van-sidebar-item title="美食推荐" />
                    </van-sidebar>
                    <span style="font-size: 15px;">更多&nbsp;&nbsp;></span>
                </div>
            </van-sticky>
            <van-list v-model:loading="loading" :finished="finished" finished-text="我是有底线的" @load="onLoad">
                <van-card
                @click="$router.push('/home/guide')"
                v-for="item in footList" :key="item.id" :num="item.sales" :title="item.title"
                    :thumb="item.images">
                    <template #tags>
                        <van-tag plain type="primary">“{{ item.textw }}”</van-tag>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <b style="font-size: 16px;color: #1855a5;">4.5<span
                                style="font-size: 12px;color: #1855a5;">超棒</span></b>
                        <p style="color: #969595;">{{ item.subhead }} ￥{{ item.price }}/人</p>
                        <p>
                            <van-tag type="danger">券</van-tag>
                            <b style="color: red;font-weight: bold;">￥{{ item.amounta }}</b>
                            <van-tag color="#ffe1e1" text-color="#ad0000">{{ item.amountza }}折</van-tag>
                            <b>{{ item.textt }}</b>
                        </p>
                        <p>
                            <van-tag type="danger">团</van-tag>
                            <b style="color: red;font-weight: bold;">￥{{ item.amountb }}</b>
                            <van-tag color="#ffe1e1" text-color="#ad0000">{{ item.amountzb }}折</van-tag>
                            <b>{{ item.textr }}</b>
                        </p>
                    </template>
                </van-card>
            </van-list>
        </van-pull-refresh>

        <!-- 回到顶部 -->
        <van-back-top right="0" bottom="60px" />
    </div>
</template>

<script setup>
//轮播图图片资源
const images = [
    'http://sxc2.dwjlxs.cn/upload/202208/08/202208082055080592.jpg',
    'http://sxc2.dwjlxs.cn/upload/202208/08/202208082055082955.jpg',
    'http://sxc2.dwjlxs.cn/upload/202208/08/202208082055086715.jpeg',
    'http://sxc2.dwjlxs.cn/upload/202208/08/202208082055083844.jpg'
];
import { ref, onMounted } from 'vue';
import httpApi from '@/http/index';
import { showToast } from 'vant';
// 查询所有美食模块  四个小卡片
const like = ref([])
onMounted(() => {
    httpApi.IndexApi.queryfoots().then(res => {
        console.log(res);
        //为like赋值
        like.value = res.data.data
    })
})



// 查询所有美食推荐列表
const footList = ref([])
onMounted(() => {
    httpApi.IndexApi.queryfootsList().then(res => {
        console.log(res);
        footList.value = res.data.data
    })
})








// 下拉刷新功能
const loadings = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loadings.value = false;
    }, 1000);
}







// 底部刷新
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1);
        }

        // 加载状态结束
        loading.value = false;
        // 数据全部加载完成
        if (list.value.length >= 40) {
            finished.value = true;
        }
    }, 500);
}
</script>

<style lang="scss" scoped>
span {
    font-size: 11px;
    margin-top: 7px;
    color: #747474;
}

.tabs img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 14px;
}

.tabs p {
    font-size: 14px;
    color: #747474;
}

.tabs div {
    box-sizing: border-box;
    padding-right: 10px;
}

.custom {
    width: 80px;
    font-size: 14px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
}
</style>